<template>
  <c-card style="padding-bottom: 0;">
    <el-form :inline="true" :model="formInline">
      <el-form-item label="名称编码">
        <el-input
            v-model.trim="formInline.keyword"
            placeholder="名称编码"
        />
      </el-form-item>
      <el-form-item label="交易所" prop="type">
        <el-select v-model="formInline.type" placeholder="请选择" style="width: 200px;">
          <el-option label="沪深" value="0"/>
<!--          <el-option label="上证" value="1"/>-->
          <el-option label="创业" value="2"/>
          <el-option label="科创" value="3"/>
          <el-option label="北交" value="4"/>
        </el-select>
      </el-form-item>

<!--      <el-form-item label="价格范围" prop="priceType">-->
<!--        <el-select v-model="formInline.priceType" placeholder="请选择" style="width: 200px;">-->
<!--          <el-option label="0~5" value="0"/>-->
<!--          <el-option label="5~10" value="1"/>-->
<!--          <el-option label="10~20" value="2"/>-->
<!--          <el-option label="20~50" value="3"/>-->
<!--          <el-option label="50~100" value="4"/>-->
<!--          <el-option label="100~3000" value="5"/>-->
<!--        </el-select>-->
<!--      </el-form-item>-->

      <el-form-item label="板块" prop="bkCode">
        <el-select v-model="formInline.bkCode" placeholder="请选择" style="width: 200px;">
          <el-option
              v-for="item in bkList"
              :key="item.id"
              :label="item.bkName"
              :value="item.bkCode"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="searchHandle">查询</el-button>
        <el-button @click="resetHandle">重置</el-button>
        <el-button link type="primary" @click.stop="detailHandle">
          多图
        </el-button>
      </el-form-item>
    </el-form>
  </c-card>
  <c-card>
    <el-table v-loading="isLoading"
              @selectionChange="selectionChange"
              @row-click="rowHandle" @sort-change="sortChange" :data="tableData" stripe highlight-current-row >
      <el-table-column type="selection" width="30" />
      <el-table-column prop="stockCode" label="股票代码"/>
      <el-table-column prop="stockName" label="股票名称"/>
<!--      <el-table-column prop="price" label="最新价" sortable>-->
<!--        <template #default="{row}">-->
<!--          <el-text :type="getColorName(row.ratio)">{{row.price}}</el-text>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="ratio" label="涨跌比" sortable>-->
<!--        <template #default="{row}">-->
<!--          <el-text :type="getColorName(row.ratio)">{{row.ratio}}%</el-text>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="rise" label="涨跌额">-->
<!--        <template #default="{row}">-->
<!--          <el-text :type="getColorName(row.ratio)">{{row.rise}}</el-text>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column prop="bkName" label="行业板块" sortable/>
<!--      <el-table-column prop="turnoverRate" label="换手率" sortable>-->
<!--        <template #default="{row}">-->
<!--          {{row.turnoverRate}}%-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="peRatio" label="市盈率（动）" sortable/>-->
      <el-table-column fixed="right" label="操作" width="150">
        <template #default="{row}">
<!--          <el-button link type="danger" @click.stop="delHandle(row)">-->
<!--            删除-->
<!--          </el-button>-->
          <el-button link type="primary" @click.stop="rcHandle(row)">
            关注
          </el-button>
          <el-button link type="success" @click.stop="openDf(row.stockCode)">东方</el-button>
        </template>
      </el-table-column>
    </el-table>
    <c-pagination @page-change="pageChange" :total="pagination.total" :page="pagination.page"
                  :limit="pagination.pageSize"></c-pagination>
  </c-card>

  <c-add-update-thrend ref="addUpdateThrendRef" @ok="getPageList"></c-add-update-thrend>

</template>

<script setup>
import {reactive, ref} from "vue";
import {DEL, GET, POST} from "../../../api/index.js";
import {getColorName, messageBox, notify, openDf, toStockDetail} from "../../../utils/commonScript.js";
import CCard from "../../../c-components/c-card.vue";
import CPagination from "../../../c-components/c-pagination.vue";
import {useRouter} from "vue-router";
import {getPriceRange, typeOptions} from "../../../utils/listData.js";
import {camelToSnake} from "../../../utils/index.js";
import CAddUpdateThrend from "../../../c-components/c-add-update-thrend.vue";

const router = useRouter()
const tableData = ref([])
const bkList = ref([])
const formInline = reactive({
  keyword: '',
  type: '',
  priceType: '',
  bkCode: '',
  orderField: 'ratio',
  order: 'desc'
})
const isLoading = ref(false)
const addUpdateThrendRef = ref(null)
const selectIds = ref([])
const selectNames = ref([])

const pagination = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
});

const selectionChange = (rows) => {
  selectIds.value = rows.map(item => item.stockCode)
  selectNames.value = rows.map(item => item.stockName)
}
const detailHandle = () => {
  if(selectIds.value.length){
    toStockDetail(router, selectIds.value.join(), selectNames.value.join())
  } else{
    notify('请勾选要显示的股票', 'error')
  }
}

const updateThrendHandle = (row) => {
  addUpdateThrendRef.value.open(row)
}

const getLevelName = (level) => {
  if(!level) {
    return  ''
  }
  return typeOptions.filter(item => item.value == level)[0]?.label
}

const sortChange = (row) => {
  formInline.orderField = camelToSnake(row.prop)
  formInline.order = row.order === 'ascending' ? 'asc' : 'desc'
  pageChange(1, 10)
}

const rowHandle = (row) => {
  toStockDetail(router, row.stockCode, row.stockName)
}

const pageChange = (page, pageSize) => {
  pagination.page = page
  pagination.pageSize = pageSize
  getPageList()
}

const delHandle = (row) => {
  messageBox.confirm(
      `确定要删除 【${row.stockName}】?`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        DEL('/market/market', [row.id]).then(res => {
          notify('删除成功')
          getPageList()
        })
      })
      .catch(() => {

      })


}

// 获取所有股票信息
const getPageList = () => {
  isLoading.value = true
  GET("/market/market/page", {
    stockName: formInline.keyword,
    type: formInline.type,
    page: pagination.page,
    pageSize: pagination.pageSize,
    minPrice: getPriceRange(formInline.priceType).min,
    maxPrice: getPriceRange(formInline.priceType).max,
    bkCode: formInline.bkCode,
    orderField: formInline.orderField,
    order: formInline.order
  }).then(res => {
    tableData.value = res.data.list
    pagination.total = res.data.total
    isLoading.value = false
  }).catch(() => {
    isLoading.value = false
  })

}
getPageList()

const rcHandle = (row) => {
  POST('/market/user', {
    stockCode: row.stockCode,
  }).then(res => {
    notify('关注成功')
  })

}

const getBKList = () => {
  GET('/market/bk/list', {
  }).then(res => {
    bkList.value = res.data
  })
}
getBKList()

const searchHandle = () => {
  tableData.value = []
  pagination.page = 1
  pagination.pageSize = 10
  pagination.total = 0
  getPageList()
}

const resetHandle = () => {
  formInline.keyword = ''
  formInline.type = ''
  formInline.priceType = ''
  formInline.bkCode = ''
  searchHandle()
}

</script>

<style lang="scss" scoped>
</style>
